import { DoubleRightOutlined } from '@ant-design/icons';
import { Tag } from 'antd';
import * as moment from 'moment';
import React from 'react';
import type { PlateChangeLog } from '../../types.d';
import styles from '../style.less';

const ChangeLogItem = (props: { logItem: PlateChangeLog }) => {
  const { logItem } = props;
  const tagStyle: React.CSSProperties = {
    fontSize: '20px',
    padding: '10px',
    minWidth: '110px',
    textAlign: 'center',
  };
  return (
    <div className={styles.plateLog}>
      <div className={styles.desc}>
        <span>操作人员:</span>
        <span>{logItem.operUserName || logItem.operUser}</span>
      </div>
      <div className={styles.desc}>
        <span>操作时间:</span>
        <span>{moment(logItem.operTime).format('YYYY-MM-DD HH:mm:ss')}</span>
      </div>
      <div className={styles.plate}>
        <Tag color="#4bc2f9" style={tagStyle}>
          {logItem.prevPlate || '无'}
        </Tag>
        <DoubleRightOutlined style={{ color: 'green', marginRight: '5px' }} />
        <Tag color="#5895d0" style={tagStyle}>
          {logItem.currPlate || '无'}
        </Tag>
      </div>
    </div>
  );
};

export default ChangeLogItem;
